var SearchForm = function () {
  var template = /* html */ `
    <div class="search-form" v-loading.fullscreen.lock="loading">
      <el-form inline label-width="auto">
        <el-form-item label="设备型号">
          <el-input v-model="search.machineModel" class="search-input"></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input v-model="search.machineSerialNo" class="search-input"></el-input>
        </el-form-item>
        <el-form-item label="客户">
          <el-input v-model="search.buyer" class="search-input"></el-input>
        </el-form-item>
        <el-form-item label="维修人员">
          <sys-autocomplete open-all-dropdown v-model="search.workName" class="search-input" :options="workNameList">
        </el-form-item>
        <el-form-item label="是否收费">
          <el-select clearable v-model="search.custPay" class="search-input">
            <el-option v-for="item in custPayList" :key="'custPay_'+item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否结算">
          <el-select clearable v-model="search.balancePrice" class="search-input">
            <el-option v-for="item in balancePriceList" :key="'balancePrice_'+item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工单状态">
          <el-select clearable v-model="search.status" class="search-input">
            <el-option v-for="item in statusList" :key="'status_'+item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期">
          <el-date-picker v-model="search.outTimeStart" value-format="timestamp" :editable="false" style="width:149px"
            :picker-options="startDateOption"></el-date-picker>
          <span>-</span>
          <el-date-picker v-model="search.outTimeEnd" value-format="timestamp" :editable="false" style="width:149px"
            :picker-options="endDateOption"></el-date-picker>
        </el-form-item>
        <el-form-item label="完成日期">
          <el-date-picker v-model="search.workCompleteStartTime" value-format="timestamp" :editable="false" style="width:150px"
            :picker-options="workCompleteStartTimeOption"></el-date-picker>
          <span>-</span>
          <el-date-picker v-model="search.workCompleteEndTime" value-format="timestamp" :editable="false" style="width:150px"
            :picker-options="workCompleteEndTimeOption"></el-date-picker>
        </el-form-item>
      </el-form>
    </div>
  `;

  return {
    mixins: [
      datePickerOptionsMixin('outTimeStart', 'outTimeEnd'),
      datePickerOptionsMixin('workCompleteStartTime', 'workCompleteEndTime', 'workCompleteStartTimeOption', 'workCompleteEndTimeOption')
    ],

    props: {
      search: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        custPayList: i18n.getDropDown('machineRepair.repairTable.custPay', [1, 0]),
        balancePriceList: i18n.getDropDown('machineRepair.repairTable.balancePrice', [1, 0]),
        statusList: i18n.getDropDown('machineRepair.repairTable.status', [-2, 0, 1, 2, 3]),
        workNameList: []
      };
    },

    created: function () {
      this.setWorkNameList();
    },

    methods: {
      setWorkNameList: function () {
        this.loading = true;
        var self = this;
        ajaxRequest('workOrder/getServiceWorkerList').then(function (workNameList) {
          workNameList = _.map(workNameList, 'serviceWorker');
          self.workNameList = workNameList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      SysAutocomplete: SysAutocomplete
    },

    template: template
  };
}();
